<template>
	<div class="shopArticle" :class="{'uni-overflow-hidden':isOpen}">
		<div class="all new_filter_wrap">
			<div>共上传{{list.total}}篇文章</div>
			<chooseCode ref="chooseCode"
						@click="openChooseCode"
						:isOpen.sync="isOpen"
						:chooseTitle.sync="styletext">
				<div class="type_body">
					<ul>
						<li class="type_item" v-for="(item, index) in typeData" :class="{'active': typeIndex == index}"
							:key="index" @click="choose(index, item)">{{item.cat_name}}
						</li>
					</ul>
				</div>
			</chooseCode>
		</div>

		<div class="list">
			<div class="caselist">
				<div @click="skiptodetail(item.article_relevance_id,item.article_id)"
					 v-for="(item, index) in list.data" :key="index" class="blodsqure">
					<div class="miaoshu">
						<div class="new_articletop">
							<img alt="" :src="item.cover_img">
							<div class="article_sign">{{item.cat_name}}</div>
						</div>
						<div class="new_articledesc">
							<p class="article_tle ellipsis_two_line_com">{{item.title}}</p>
							<div class="view_people">
								<div class="view_img">
									<!-- <img :src="items.share_user_picture" alt="" -->
										 <!-- v-for="(items,index) in item.share_user_list" :key="index"> -->
									<span>{{item.view_num}}浏览</span>
								</div>
								<div class="view_transfer">
									<i class="iconfont iconfenxiang"></i>{{item.share_num}}
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<view v-if="list.finished&&list.data.length!==0" class="noMore">没有更多了</view>

	</div>
</template>

<script>
import chooseCode from '@/pages/components/chooseCode'

import { zxglGetlist, zxglGetschedule } from '@/api/shop'

import { list } from '@/mixins'

export default {
	name: 'ShopArticle',
	mixins: [list],
	components: {
		chooseCode
	},
	data() {
		return {
			isOpen: false,
			cat_id: '',
			styletext: '全部文章',
			typeIndex: 0,
			typeData: []
		}
	},
	onLoad(option) {
		this.option = option
		this.cat_id = option.cat_id
		this.getArticleType()
		this.getArticleList()
	},
	// 下拉刷新
	onPullDownRefresh() {
		let that = this
		this.resetList()
		this.getArticleList().then(res => {
			uni.stopPullDownRefresh()
		})
	},
	// 加载更多
	onReachBottom() {
		if (this.list.loading) {
			return
		}
		if (this.list.data.length < this.list.total) {
			this.getArticleList().then(res => {
				uni.stopPullDownRefresh()
			})
		} else {
			uni.stopPullDownRefresh()
			uni.showToast({
				title: '没有更多了',
				duration: 2000,
				icon: 'none'
			})
		}
	},
	methods: {
		// ==文章列表==
		async getArticleList() {
			let that = this
			let params = {
				owner_user_id: this.option.owner_user_id,
				page: this.list.page
			}
			if (this.cat_id) {
				params.cat_id = this.cat_id
			}
			zxglGetlist(params).then((res) => {
                		that.completes(res)
			})
		},
		// ==文章筛选==
		getArticleType() {
			zxglGetschedule().then((res) => {
				if (res.status === 'success') {
					res.data.unshift({ cat_name: '全部文章', cat_id: '' })
					this.typeData = res.data
				}
			})
		},
		openChooseCode() {
			this.$refs.chooseCode.open()
		},
		choose(index, item) { // 风格选择
			this.typeIndex = index
			this.styletext = item.cat_name
			this.cat_id = item.cat_id
			console.log(this.styletext)
			this.resetList()
			this.getArticleList().then(res => {
				uni.stopPullDownRefresh()
			})
		},

		// ==文章详情==
		skiptodetail(article_relevance_id, article_id) {
			let query = {
				owner_user_id: this.option.owner_user_id,
				articleid: article_relevance_id,
				mainId: article_id,
				gobackt: 'shoparticle'
			}

			// 埋点信息
			uni.setStorageSync('currentPoint', JSON.stringify({ realName: 'Articledetai',
				roleId: 1 }))
			uni.navigateTo({
				url: `/pages/getGuest/articledetail${this.commonJS.queryData(query)}`
			})
		}
	}
}
</script>

<style lang="scss" scoped>
	.shopArticle {
		background-color: #f5f5f5;
		.new_filter_wrap {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 40px;
			color: #999;
			background-color: white;
			border-top:1px solid #f5f5f5;
		}
		.list {
			background: none;
			width: 100%;
			height: auto;
			.caselist {
				width: 100%;
				.blodsqure {
					width: 95%;
					height: 480px;
					margin-left: 3%;
					border-radius: 20px;
					// padding-bottom: 20px;
					background: white;
					margin-bottom:40px;

					.miaoshu{
						position: relative;
						height: 100%;
						float: none;
						margin-top: 20px;
						display: block;
						.new_articletop{
							width: 100%;
							height: 320px;
							position: relative;
							img{
								border-radius: 20px 20px 0 0;
								height: 100%;
								width: 100%;
							}
							.article_sign{
								height:38px;
								padding: 0 15px;
								line-height:38px;
								position: absolute;
								left: 0;
								bottom: 0;
								opacity: .6;
								background: #000;
								text-align: center;
								font-size: 24upx;
								color: #fff;
								border-radius: 0 20px 0 0;
							}
						}
					}

					.new_articledesc {
						width: 95%;
						margin-left: 3%;
						height: auto;
						margin-top: 30px;
						.article_tle {
							font-size:28px;
							font-weight: bold;
							margin-bottom: 10px;
						}
						.view_people {
							width: 100%;
							height: 50px;
							color: #999999;
							font-size: 24px;
							line-height: 24px;
							margin-top:20px;
							position: relative;
							.view_img {
								float: left;
								img {
									float: left;
									width:50px;
									height: 50px;
									background: green;
									margin-left: -30px;
									border-radius: 50%;
									&:first-child {
										margin-left: 0;
									}

								}

								span {
									float: left;
									// margin-left:20px;
								}
							}
							.view_transfer {
								float:right;
								.iconfenxiang {
									margin-left: 20px;
									margin-right:10px;
									font-size:20px;
								}
							}
						}
					}
				}
			}
		}
		.type_body {
			width: 100%;
			background-color: #fff;
			padding: 20px;
			box-sizing: border-box;
			ul{
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				justify-content: space-between;
				padding: .4rem;
				.type_item {
					padding: 0 70px;
					height:80px;
					line-height: 80px;
					text-align: center;
					border-radius:40px;
					border: 1px solid #ddd;
					margin-bottom: 40px;
					&.active {
						color: #333;
						background-color: #ffd11a;
						border: none;
					}
				}

			}

		}
	}
</style>

